<template>
  <div class="tree-modle">
    <div
      class="modle-bg w-full h-full"
      @click="closeModel"
    />
    <div class="modle-container">
      <div class="modle-title">
        <span class="flex items-center font-bold">
          <img
            class="w-14px h-14px mr-5px"
            src="@/assets/icons/h5/all-menu.png"
          />
          目录
        </span>
        <icon-font
          name="close"
          color="#626262"
          class="text-18px close-icon"
          @click="closeModel"
        />
      </div>
      <div
        ref="tree"
        class="tree-menu"
        :class="treeClass"
        @scroll="onScroll"
      >
        <button
          v-for="x in contentData"
          :key="x.content_id"
          class="menu-item"
          :name="x.content_id === content ? 'active' : ''"
          :class="{ hadning: x.content_id === content }"
          @click="onChange(x)"
        >
          <span
            v-if="x.content_id === treeStore.content_id"
            class="activing"
          >
            <explaining
              class="w-[1em] h-[0.8em]"
              color="#ffffff"
            />
            <span class="transform scale-85">讲解中</span>
          </span>
          <p>{{ x.content_name }}</p>
        </button>
      </div>
      <div
        v-show="showDom"
        ref="treeContent"
        class="modle-body scroll"
      >
        <x-tree
          v-model="current"
          :data="treeData"
        />
      </div>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="MenuTree"
>
import { useTreeStore } from '@/store/tree'
import { useTtsaStore } from '@/store/ttsa'
import XTree from './tree/index.vue'

const emit = defineEmits(['unmount'])
const props = defineProps(['id'])

const showDom = ref(true)
const treeStore = useTreeStore()
const ttsaStore = useTtsaStore()

const contentData = computed(() => treeStore.menuData)
const treeData = computed(() => {
  const item = treeStore.menuData.find(x => x.content_id === content.value)
  return item.node_tree
})

const tree = ref()
const treeContent = ref()
const content = ref(props.id || treeStore.content_id || contentData.value[0].content_id)
const current = computed({
  get: () => treeStore.current || {},
  set: (v) => {
    if (!ttsaStore.paused) ttsaStore.unexpected = true
    ttsaStore.next({ node_id: v.id, content_id: v.content })
    closeModel()
  },
})

const onChange = (c) => {
  showDom.value = false
  content.value = c.content_id

  const timerStart = setTimeout(() => {
    showDom.value = true
    nextTick(() => {
      checkScroll()
    })
    clearTimeout(timerStart)
  }, 1)

}

const treeClass = ref('')

const onScroll = (e) => {
  const target = e.target
  if (target.scrollLeft < 20) treeClass.value = 'show-left'
  else if (target.scrollWidth - target.scrollLeft < target.clientWidth + 20) treeClass.value = 'show-right'
  else treeClass.value = 'no-show'
}

const closeModel = () => emit('unmount')

const checkScroll = () => {
  const activeContentDom = treeContent.value.querySelector('.tree-node-content.active')
  if (activeContentDom) {
    treeContent.value.scrollTop = activeContentDom.offsetTop - 80
  } else {
    treeContent.value.scrollTop = 0
  }
}

onMounted(() => {
  if (contentData.value.length > 2) treeClass.value = 'show-left'
  const activeDom = tree.value.children.namedItem('active')
  tree.value.scrollLeft = activeDom.offsetLeft - 20
  checkScroll()
})
</script>

<style
  scoped
  lang="scss"
>
.tree-modle {
  @apply absolute top-0 left-0 w-screen h-screen z-1086;

  .modle-container {
    @apply w-full absolute left-0 bottom-0;
    height: 500px;
    padding-bottom: 10px;
    color: rgba(59, 83, 121, 1);

    &::after {
      content: '';
      @apply absolute-full block backdrop-filter backdrop-blur-10 z-0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background: rgba(239, 247, 255, 0.85);
      box-shadow: 0px -6px 24px rgba(0, 0, 0, 0.10);
    }

    >* {
      position: relative;
      z-index: 1;
    }

    .modle-title {
      @apply flex items-center justify-between;
      /* border-bottom: 1px solid rgb(151, 151, 151, 0.6); */
      height: 41px;
      padding: 0 4px;
      margin: 0 6px;
      font-size: 14px;
      color: rgba(59, 83, 121, 1);

      .icon-menu {
        @apply text-primary;
      }
    }

    .bg-menu {
      content: '';
      display: block;
      width: 20px;
      height: 60px;
      position: absolute;
      top: 41px;
      z-index: 2;

      &.bg-left {
        background: linear-gradient(90deg, rgba(233, 242, 251, 1) 0%, transparent 100%);
        left: 9px;
      }

      &.bg-right {
        background: linear-gradient(270deg, rgba(233, 242, 251, 1) 0%, transparent 100%);
        right: 9px;
      }
    }

    .tree-menu {
      @apply flex items-start flex-nowrap overflow-x-auto;
      margin: 0 10px;
      height: 70px;
      overflow-x: auto;

      &.show-left {
        $mask: linear-gradient(to right, black 0, black 95%, transparent 100%);
        mask: $mask;
        -webkit-mask: $mask;
      }

      &.show-right {
        $mask: linear-gradient(to right, transparent 0, black 5%, black 100%);
        mask: $mask;
        -webkit-mask: $mask;
      }

      &.no-show {
        $mask: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
        mask: $mask;
        -webkit-mask: $mask;
      }

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
        -webkit-overflow-scrolling: touch;
        -overflow-scrolling: touch;
      }

      .menu-item {
        @apply flex items-center relative;
        width: 150px;
        min-width: 150px;
        height: 60px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: rgba(58, 82, 119, 0.1);
        color: #3A5277;
        font-size: 12px;

        /* &:focus {
          border: 1.5px solid #4673EE;
        } */

        .activing {
          @apply absolute flex items-center;
          font-size: 12px;
          border-radius: 12px 0px 6px 0px;
          padding: 4px 4px 3px 5px;
          line-height: 1;
          color: #ffffff;
          background-color: #4673EE;
          bottom: -3px;
          right: -9.5px;
          transform: scale(0.7);
        }

        p {
          flex: 1;
          padding-left: 5px;
          text-align: left;
        }

        .arrow {
          margin: 2px;
          transform: rotate(-90deg);
          fill: rgba(131, 131, 131, 1);
        }

        &+.menu-item {
          margin-left: 10px;
        }

        &.hadning,
        &.active {
          background: rgba(70, 115, 238, 0.1);
        }

        &.hadning {
          border: 1px solid #4673EE;

          p {
            font-weight: bold;
          }
        }

        &.hadning,
        &.hadning.active {
          color: #4673EE;

          .arrow {
            transform: rotate(0);
            fill: #4673EE;
          }

          &::after {
            content: '';
            @apply absolute w-0 h-0;
            left: calc(50% - 5px);
            bottom: -5px;
            border-top: 5px solid #4673EE;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }

        &.active {
          color: #4673EE;

          .arrow {
            fill: #4673EE;
          }
        }
      }
    }

    .modle-body {
      height: calc(100% - 111px);
      padding-bottom: 20px;
      margin-top: 5px;
      mask: linear-gradient(180deg, transparent, black 10px, black calc(100% - 10px), transparent 100%);
      -webkit-mask: linear-gradient(180deg, transparent, black 10px, black calc(100% - 10px), transparent 100%);
    }
  }
}

.close-icon {
  &:hover {
    fill: #4cbeff !important;
  }
}
</style>
